<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*
			1 两边固定 当中自适应
			2 当中列要完整显示
			3 当中列要优先加载。但是目前使用的布局加载顺序是：left->right->middle
			（middle中的文字，为什么能看见？按照教程中的说法：因为float布局，left只会浮动半层。middle中的文字被left所在的半层卡住了）
			*/

			/* 
		   技术点总结：
		   1、浮动
		   margin 调整旁边两列的位置，三列布局到一行
		   相对定位 调整旁边两列的位置，使左右两列位置调整到两头
			*/

			* {
				margin: 0;
				padding: 0;
			}

			body {
				min-width: 600px;
			}

			.header,
			.footer {
				height: 20px;
				text-align: center;
				border: 1px solid deeppink;
				background: gray;
			}

			.content {
				padding: 0 200px;
				overflow: hidden;
			}
			
			.content .middle,
			.content .left,
			.content .right{
				padding-bottom: 1000px;
				margin-bottom: -1000px;
			}

			.content .middle {
				float: left;
				width: 100%;
				background: pink;
			}

			.content .left {
				/*这个很难理解，margin-left只设置元素边界不设置位置。*/
				margin-left: -100%;
				float: left;
				width: 200px;
				background: yellow;
				position: relative;
				left: -200px;
				margin-bottom: -5000px;
			}

			.content .right {
				margin-left: -200px;
				float: left;
				width: 200px;
				background: blue;
				position: relative;
				right: -200px;
				margin-bottom: -5000px;
			}

			.clearfix {
				*zoom: 1;
			}

			.clearfix:after {
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="header">header</div>
		<div class="content clearfix">
			<!-- 
			这一课很精彩
			H:\尚硅谷前端学科全套教程\1.前端学科--基础阶段\尚硅谷css2.1教程\视频\05.尚硅谷_css2.1_圣杯布局
			
			但是圣杯布局太复杂，有太多的定位。
			需要看“双飞翼布局”
			-->
			<div class="middle">
				<div> middle </div>
				<div> middle </div>
				<div> middle </div>
				<div> middle </div>
				<div> middle </div>
				<div> middle </div>
				<div> middle </div>
				<div> middle </div>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div class="footer">footer</div>
	</body>
</html>
